{% extends 'base_foot.html' %}

{% block head %}
<script>
    $(function () {
        name_error = false;
        pwd_error = false;
        vc_error = false;

        if({{ error_name }}==1){
            $('.user_error').html('用户名错误').show();
        }
        if({{ error_pwd }}==1){
            $('.pwd_error').html('密码错误').show();
        }
        if({{ error_vc }}==1){
            $('.vc_error').html('验证码错误').show();
        }
        $('.name_input').blur(function () {
            if($('.name_input').val().length=0){
                $('.user_error').html('请填写用户名').show();
                name_error = false;
            }else{
                $('.user_error').hide();
                name_error = true;
            }
        });
        $('.pass_input').blur(function () {
            if($('.pass_input').val().length=0){
                $('.pwd_error').html('请输入密码').show();
                pwd_error = false;
            }else{
                $('.pwd_error').hide();
                pwd_error = true;
            }
        });
        $('.vc_input').blur(function () {
            if($('.vc_input').val().length=0){
                $('.vc_error').html('请输入验证码').show();
                vc_error = false;
            }else{
                $('.vc_error').hide();
                vc_error = true;
            }
        });
    })
</script>
{% endblock head %}

{% block body %}
	<div class="login_top clearfix">
		<a href="{% url "df_goods:index" %}" class="login_logo"><img src="/static/images/logo_banner2.png" style="width: 300px;height:100px;overflow: hidden;object-fit: cover;"></a>
	</div>

	<div class="login_form_bg">
		<div class="login_form_wrap clearfix">
			<div class="login_banner fl"><img src="../../static/images/timg%5B2%5D.png" alt=""></div>
			<div class="slogan fl">能挑擅找 · 变废为宝</div>
			<div class="login_form fr">
				<div class="login_title clearfix">
					<h1>用户登录</h1>
					<a href="{% url "df_user:register" %}">立即注册</a>
				</div>
				<div class="form_input">
					<form action="{% url "df_user:login_handle" %}" method="post">
                        {% csrf_token %}
						<input type="text" name="username" class="name_input" value="{{ username }}" placeholder="请输入用户名">
						<div class="user_error">输入错误</div>
						<input type="password" name="pwd" class="pass_input" value="{{ password }}" placeholder="请输入密码">
{#                        在cookie设置的情况下value值保证页面刷新之后保证仍旧能够在页面看到值#}
						<div class="pwd_error">输入错误</div>
{#                        验证码 #}
                        <input type="text" name="vc" class="vc_input" placeholder="请输入验证码">
                        <div class="vc_error">输入错误</div>
                        <img id='verifycode' src="/user/verifycode/?1" alt="CheckCode"/>
                        <span id='verifycodeChange' aria-placeholder="看不清，换一个"></span>
						<div class="more_input clearfix">
							<input type="checkbox" name="jizhu" value="1" checked="checked">
							<label>记住用户名</label>
							<a href="{% url "df_user:findpwdView" %}">忘记密码</a>
						</div>
						<input type="submit" name="" value="登录" class="input_submit">
					</form>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
    $(function(){
        $('#verifycodeChange').css('cursor','pointer').click(function() {
            $('#verifycode').attr('src',$('#verifycode').attr('src')+1)
        });
    });
</script>
{#  弹窗提示  #}
    {% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
    {% endif %}
{% endblock body %}
